<template>
	<view class="client-box">
		<view class="client">
			<view class="title">客户服务</view>
			<view class="content">
				24小时客服电话：<text @click="callPhone">400-1009988</text>
			</view>
			<view class="btns">
				<view class="btn left" @click="cancel">取消</view>
				<view class="btn right" @click="submit">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			cancel() {
				this.$emit('cancel')
			},
			submit() {
				this.$emit('submit')
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '400-1009988'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.client-box {
		position: fixed;
		z-index: 999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.25);
	}

	.client {
		position: fixed;
		z-index: 999;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 690rpx;
		height: 298rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 50rpx;
		margin-top: 35rpx;
		margin-bottom: 46rpx;
	}

	.content {
		font-size: 24rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: center;

		text {
			color: rgba(51, 153, 255, 1);
		}

		margin-bottom: 25rpx;
	}

	.btns {
		display: flex;
		align-items: center;
		width: 100%;
		height: 108rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.10);
	}

	.btn {
		width: 50%;
		height: 100%;
		font-size: 36rpx;
		color: #333333;
		line-height: 108rpx;
		text-align: center;

		&.right {
			color: rgba(41, 121, 255, 1);
			border-left: 1px solid rgba(0, 0, 0, 0.10);
		}
	}
</style>
